<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jq.js"></script>
    <style>
        .add,
        .cart {
            display: inline-block;
            width: 100px;
            text-align: center;
            cursor: pointer;
            border: 1px solid #e3211a;
            border-radius: 4px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="content"></div>
    <span class="add">加入购物车</span>
    <span class="cart">
        <a href="购物车.html">查看购物车</a>
    </span>
    <script src="./数据.js"></script>
    <script>
        $(function () {


            var goodsId = '';

            var goodsName = '';

            window.onload = function () {
                goodsId = location.search.substr(4);
                getGoods()
            }


            function getGoods() {
                $.each(goodsList, function (i, item) {

                    if (goodsId == item.id) {

                        renderById(item)
                        goodsName = item.name;
                    }
                })
            }


            function renderById(data) {
                console.log(data);
                var detailStr = '';
                detailStr = "<img width='200' src=http:" + data.image + ">" +
                    "<h1 class=name>" + data.name + "</h1>" +
                    "<div class=tmprice>土猫价： <span>¥" + data.price + "</span></div>";
                $('.content').html(detailStr);
            }


            $('.add').click(function () {

                var cartList = JSON.parse(localStorage.getItem('cartList')) || [];
                cartList.push(goodsId);

                localStorage.setItem('cartList', JSON.stringify(cartList));
                alert(goodsName + '添加成功!')
            })
        })
    </script>
</body>